<template>
	<view class="content" style="">
		<view class="alarmContent" style="">
		  <!-- 内容 -->
			<view class="alarm-itemline" style="">
				<view class="alarm-left" >
					<view >
						温度一场报警
					</view>
					<view class="bottom"  style="">
						温度异常时，语音拨号呼叫提醒
					</view>
				</view>
				<view>
					<view>
						<switch style="transform:scale(0.7)" checked @change="switch1Change" />
					</view>
				</view>
			</view>
			<view class="alarm-itemline" style="">
				<view class="alarm-left" >
					<view >
						报警温度阈值
					</view>
					<view class="bottom"  style="">
						温服过于阈值，系统自动触发语音拨号呼叫提醒
					</view>
				</view>
				<view class="alarm-right" style="" @click="open('bottom')">
				  <text style="">{{temperature}}%</text>
				  <i class="iconfont" style="">
				    &#xe633;
				  </i>
				</view>
			</view>
			<view class="alarm-itemline" style="width: 100%;box-sizing: border-box;">
			  <!-- 左边的呼叫号码 -->
			  <view style="width: 30%;">
			    <view>
			      呼叫号码
			    </view>
			  </view>
			  <!-- 右边的输入框和图标 -->
			  <view class="alarm-input" style="">
			    <i class="iconfont" 
			       style="">
			      &#xe624;
			    </i>
			    <input 
			      placeholder="请输入账号" 
			      type="number" 
			      v-model="phoneNumber" 
			      style=""/>
			  </view>
			</view>
		</view>
		<uni-popup ref="popup" :mask-click="false" background-color="#fff">
			<view class="alarm-popup" style="">
				<view class="popup-top" style=""  >
					<text @click="close">取消</text>
					<text class="popup-title" style="">报警温度阈值</text>
					<text>确定</text>
				</view>
				<view class="popup-content" style="">
					<view class="popup-item" v-for="i in 6"  @click="handleClick(index)" style="">
						<view class="">
							
							<uni-icons type="fire-filled" size="23"></uni-icons>
					
							
							<text style="margin-left: 20rpx;">{{i}}</text>
						</view>
						<view class="circle-button">
						    <view v-if="selectedIndex === index" class="dot"></view>
						</view>
					</view>
				</view>
				
			</view>
			
			
			
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selectedIndex: null, // 初始化没有选中任何一行
				phoneNumber:'10086',
				temperature:55,
				  visible: false,
				    }
				  },
				  onLoad() {
				  	this.open()
				  },
		methods: {
		    open() {
			    this.$refs.popup.open('bottom')
		     },
		    close() {
			    this.$refs.popup.close()
		    },
			handleClick(index) {
			      // 如果点击的行已经是当前选中的行，则取消选中
			    this.selectedIndex = this.selectedIndex === index ? null : index;
			}

		}
	}
</script>

<style lang="scss" scoped>
	.alarm-popup{
		padding: 20rpx;border-top-right-radius: 20rpx;border-top-left-radius: 20rpx;
		.popup-top{
			width: 100%;display: flex;justify-content: space-between;color: #cecece;font-size: 24rpx;
			.popup-title{
				font-size: 30rpx;color: #000;
			}
		}
		.popup-content{
			height: 400rpx;overflow: scroll;
			.popup-item{
				display: flex;justify-content: space-between;padding: 15rpx 30rpx;border-bottom: 1rpx solid #eaeaea;
			}
		}
	}
.circle-button {
  width: 30rpx;          /* 按钮的总宽度 */
  height: 30rpx;         /* 按钮的总高度 */
  border-radius: 50%;   /* 圆形边框 */
  border: 3rpx solid #414d78; /* 外层边框 */
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;  /* 按钮背景色 */
}

.dot {
  width: 18rpx;         /* 圆点的宽度 */
  height: 18rpx;        /* 圆点的高度 */
  border-radius: 50%;  /* 圆点 */
  background-color: #414d78; /* 圆点颜色 */
}
	.popup-content {
	  padding: 20px;
	  text-align: center;
	}
	
	.text {
	  font-size: 16px;
	  color: #333;
	}
.content{
	padding: 30rpx;
	.alarmContent{
		font-size: 26rpx; border-radius: 20rpx; box-shadow: 0 4rpx 10rpx rgba(181, 181, 181, 0.3);
		.alarm-itemline{
			display: flex;justify-content: space-between;padding: 40rpx 40rpx;
			.alarm-input{
				position: relative; width: 70%;box-sizing: border-box;
				.iconfont{
					position: absolute; left: 2%; top: 50%; 
					transform: translateY(-50%); font-size: 40rpx; color: gray;
				}
				input{
					padding-left: 60rpx; height: 60rpx; 
					font-size: 28rpx; border: 1px solid #ccc;
					border-radius: 50rpx;
				}
			}
			.alarm-left{
				.bottom{
					font-size: 20rpx;color: #afafaf;margin-top: 10rpx;
				}
			}
			.alarm-right{
				display: flex; justify-content: center; align-items: center; padding: 10rpx;
				text{
					line-height: 25rpx; color: #a5a5a5;
				}
				.iconfont{
					font-size: 25rpx; margin-left: 5rpx;
				}
			}
		}
	}
}
</style>
